<template>
  <view>
    <u-form>
      <u-picker :loading="loading" :show="show" ref="uPicker" :columns="columns" @confirm="confirm" @change="changeHandler" @cancel="cancelHandler"></u-picker>
      <u-form-item label="料架">
        <u--input
            v-model="form.rackName"
            placeholder="请输入料架名称"
            border="surround"
            readonly
        ></u--input>
      </u-form-item>
      <u-form-item label="层数">
        <u--input
            v-model="form.locCeng"
            placeholder="请输入层数"
            border="surround"
            readonly
        ></u--input>
      </u-form-item>
      <u-button @click="show = true">选择料架层级</u-button>
    </u-form>
    <u-divider text="分割线" :dot="true"></u-divider>
    <view>
      <u-row >
        <u-col span="6.5"><u-button @click="checkRack">检验</u-button></u-col>
        <u-col span="6.5"><u-button @click="backRack">复原</u-button></u-col>
      </u-row>
    </view>
  </view>
</template>

<script>
import UPicker from "../../../../uview-ui/components/u-picker/u-picker.vue";
import UButton from "../../../../uview-ui/components/u-button/u-button.vue";
import URow from "../../../../uview-ui/components/u-row/u-row.vue";
import UCol from "../../../../uview-ui/components/u-col/u-col.vue";
import UText from "../../../../uview-ui/components/u-text/u-text.vue";
import UForm from "../../../../uview-ui/components/u-form/u-form.vue";
import UFormItem from "../../../../uview-ui/components/u-form-item/u-form-item.vue";
import UInput from "../../../../uview-ui/components/u--input/u--input.vue";
import UDivider from "../../../../uview-ui/components/u-divider/u-divider.vue";
import {backRack, checkRack, getCheckRackInfo} from "../../../../api/work/rack/rackUtil";

export default {
  components: {UDivider, UInput, UFormItem, UForm, UText, UCol, URow, UButton, UPicker},
  data() {
    return {
      show: false,
      loading: false,
      checkFlag: false,
      confirmShow: false,
      form: {
        rackName: null,
        locCeng: null,
      },
      columns: [[1,2],[1,1]],
      columnData: [[1,1],[2,2]]
    }
  },
  onLoad() {
    let that = this;
    that.loading = true;
    getCheckRackInfo().then((res)=>{
      that.$set(that.columns, 0, res.data.rackNames);
      that.$set(that.columns, 1, res.data.defaultValues);
      res.data.locCeng.forEach((item, index) => {
        that.$set(that.columnData,index, item);
      })
      that.loading = false;
    });
  },
  methods: {
    loadData() {
      setTimeout(() => {}, 2);
    },
    changeHandler(e) {
      const {
        columnIndex,
        value,
        values, // values为当前变化列的数组内容
        index,
        // 微信小程序无法将picker实例传出来，只能通过ref操作
        picker = this.$refs.uPicker
      } = e
      // 当第一列值发生变化时，变化第二列(后一列)对应的选项
      if (columnIndex === 0) {
        // picker为选择器this实例，变化第二列对应的选项
        picker.setColumnValues(1, this.columnData[index])
      }
    },
    // 回调参数为包含columnIndex、value、values
    confirm(e) {
      this.form.rackName = e.value[0];
      this.form.locCeng = e.value[1];
      this.show = false
      this.confirmShow = true;
    },
    cancelHandler() {
      this.show = false
    },
    checkRack() {
      if (!this.confirmShow) {
        this.$modal.msgError("请选择料架层级");
        return;
      }
      if (this.checkFlag) {
        this.$modal.msgError("已进行检验，不可重复检验");
        return;
      }
      this.checkFlag = true;
      let that = this;
      checkRack(this.form).then(()=>{
        that.$modal.msgSuccess("开始检验");
      });
    },
    backRack() {
      if (!this.confirmShow) {
        this.$modal.msgError("请选择料架层级");
        return;
      }
      if (!this.checkFlag) {
        this.$modal.msgError("未进行检验，不可复原");
        return;
      }
      this.checkFlag = false;
      let that = this;
      backRack(this.form).then(()=>{
        that.$modal.msgSuccess("已复原");
      });
    }
  }
}
</script>
